<template>
  <el-table :data="tableData" style="width: 50%">
    <el-table-column prop="name" label="姓名" width="180" />
    <el-table-column prop="age" label="年龄" width="180" />
    <el-table-column prop="sex" label="性别" />
    <el-table-column label="Operations">
      <template #default="scope">
        <el-button size="small" @click="EditClick(scope)"
          >Edit</el-button
        >
        <el-button
          size="small"
          type="danger"
          >Delete</el-button
        >
      </template>
    </el-table-column>
  </el-table>
 
</template>

<script setup >
import { onMounted, ref, toRefs,  defineProps,defineEmits} from 'vue';
import {getTableData} from '../../api/TableApi'

  
  const tableData = ref(null)


    onMounted(()=>{
      getTableData().then(res=>{
          if(res.status==0){
          tableData.value=res.data
          }
        })

    })

    const EditClick=(scope)=>{
      console.log(scope);
    }

  
</script>

<style>

</style>